<template>
     <el-row class="container">
        <el-col :span="24" class="header">
          <el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
            {{collapsed?shortName:sysName}}
          </el-col>
          <el-col :span="1">
            <div class="tools" @click.prevent="collapse">
              <i class="fa fa-align-justify"></i>
            </div>
          </el-col>
		  <el-col :span="9" class="title">
            <div>
              后台管理系统
            </div>
          </el-col>
          <el-col :span="4" class="userinfo">
            <el-dropdown trigger="hover">
              <span class="el-dropdown-link userinfo-inner"><img src='../../assets/user.png' /> {{sysUserName}}</span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleUpdatePwd">修改密码</el-dropdown-item>
                <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-col>

      <el-col :span="24" class="main">
        <aside :class="collapsed?'menu-collapsed':'menu-expanded'">
          <!--导航菜单-->
          <el-menu :default-active="$route.path" id="menuClass" class="el-menu-vertical-demo"  unique-opened router v-show="!collapsed">
              <el-menu-item v-for="(item,index) in routerList" :index="item.path" :key="index" :style="checkMenu(item.path)<0?'display: none;':''">
                  <i class="el-icon-menu"></i>
                  <span slot="title">{{item.name}}</span>
              </el-menu-item>
          </el-menu>
          <!--导航菜单-折叠后-->
				<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
					<li v-for="(item,index) in routerList" class="el-submenu item">
						<template v-if="!item.leaf">
							<div class="el-submenu__title" :style="checkMenu(item.path)<0?'display: none;':'padding-left: 20px;'"  @click="$router.push(item.path)">
								<i :style="$route.path==item.path?'color:blue':''">{{item.title}}</i>
							</div>
						</template>
						
					</li>
				</ul>
        </aside>
        <section id="content-container-body" class="content-container">
          <div class="grid-content bg-purple-light">
            <el-col :span="24" class="breadcrumb-container">
              <strong class="title"><span style=" font-size: 18px;color: #426aff;">{{schoolName}}</span>--{{$route.name}}</strong>
              <el-breadcrumb separator="/" class="breadcrumb-inner">
                <el-button v-if="roleLevel!='2'" type="primary" @click="$router.push('/school')" >返回</el-button>
              </el-breadcrumb>
            </el-col>
            <el-col :span="24" class="content-wrapper">
              <transition name="fade" mode="out-in">
                <router-view></router-view>
              </transition>
            </el-col>
          </div>
		  <!--修改密码界面-->
		<el-dialog title='修改密码' :visible.sync="pwdFormVisible" :close-on-click-modal="false" :before-close="closeDialog" :append-to-body="true">
			<el-form :model="pwdForm" label-width="120px" :rules="pwdRules" ref="pwdForm">
				<el-form-item label="旧密码" prop="oldPassword">
					<el-input :type="passw" v-model="pwdForm.oldPassword" placeholder="请输入原有密码" style="float:left;width:50%;" auto-complete="off">
						<i slot="suffix" :class="icon" @click="showPass"></i>
					</el-input>
				</el-form-item>
				<el-form-item label="新密码" prop="newPassword">
					<el-input :type="passw" v-model="pwdForm.newPassword" placeholder="请输入新的密码" style="float:left;width:50%;" auto-complete="off">
						<i slot="suffix" :class="icon" @click="showPass"></i>
					</el-input>
				</el-form-item>
				<el-form-item label="重复新密码" prop="newPassword2">
					<el-input :type="passw" v-model="pwdForm.newPassword2" placeholder="请重复输入新密码" style="float:left;width:50%;" auto-complete="off">
						<i slot="suffix" :class="icon" @click="showPass"></i>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="closeDialog">取消</el-button>
				<el-button type="primary" @click.native="pwdSubmit">提交</el-button>
			</div>
		</el-dialog>
        </section>
      </el-col>
    </el-row>
</template>
<script>
import util from '../../common/js/util'
import store from '@/store'
import { SysApi } from '@/api/index'

export default {
    data(){
		var validatePass = (rule, value, callback) => {
			if  (value === '') {
                callback(new Error ( '请输入密码' ));
			} else {
					if( this.pwdForm.newPassword2 !==  '' ) {
						this.$refs.pwdForm.validateField( 'newPassword2' );
					}
					callback();
			}
		};

		var  validatePass2 =  (rule, value, callback ) => {
			if  (value ===  '' ) {
				callback( new  Error ( '请再次输入密码' ));
			}  else if  (value !==  this.pwdForm.newPassword) {
				callback( new  Error ( '两次输入密码不一致!' ));
			}  else  {
				callback();
			}
		};
        return{
            exitbtn:false,
            sysName:'佳盈教育平台',
			shortName: '佳',
			collapsed:false,
			pwdFormVisible: false,
			adminId: '',
			sysUserName: '',
			roleLevel: '',
            schoolName:'',
            pos:[],
            phase:'',
            area:'',
			routerList:[],
			menuList:[],
			schoolId:0,
			passw:"password",
            icon:"el-input__icon el-icon-view",
            pwdForm: {
				oldPassword: '',
				newPassword: '',
				newPassword2: ''
			},
			pwdRules: { 
				oldPassword:[
					{ required: true, message: '请填写旧密码', trigger: 'blur' },
					{ min: 1, max: 30, message: '旧密码长度为 1 到 30 个字符', trigger: ['blur','change'] }
				],
				newPassword:[
					{ required: true, message: '请填写新密码', trigger: 'blur' },
					{ min: 1, max: 30, message: '新密码长度为 1 到 30 个字符', trigger: ['blur','change'] },
					{ validator: validatePass , trigger: 'blur' }
				],
				newPassword2:[
					{ required: true, message: '请重复填写新密码', trigger: 'blur' },
					{ min: 1, max: 30, message: '新密码长度为 1 到 30 个字符', trigger: ['blur','change'] },
					{ validator: validatePass2 , trigger: 'blur' }
				]
			},
        }
    },
    created(){
        
        var user = sessionStorage.getItem('user');
        if (user) {
          user = JSON.parse(user);
          this.sysUserName = user.adminName || '';
		  this.adminId = user.adminId;
		  this.roleLevel = user.roleLevel;
        }
        this.routerList = this.$router.options.routes[4].children;
        if(this.$route.params.schoolId != undefined){
          sessionStorage.setItem("schoolId", JSON.stringify(this.$route.params.schoolId));
          this.schoolId = this.$route.params.schoolId;
        }else{
          this.schoolId = JSON.parse(sessionStorage.getItem("schoolId"));
        }  
        if(this.$route.params.schoolName != undefined){
          sessionStorage.setItem("schoolName", JSON.stringify(this.$route.params.schoolName));
          this.schoolName = this.$route.params.schoolName;
        }else{
          this.schoolName = JSON.parse(sessionStorage.getItem("schoolName"));
		} 
		
		//获取菜单列表
		this.getMenuList();	

    },
    mounted() {
			var user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user.adminName || '';
				this.adminId = user.adminId;
				this.roleLevel = user.roleLevel;
			}

			//获取菜单列表
			this.getMenuList();	
			
		},
    methods:{
		//密码的隐藏和显示
		showPass(){
			if( this.passw=="text"){
				this.passw="password";
				this.icon="el-input__icon el-icon-view";
			}else {
				this.passw="text";
				this.icon="el-input__icon el-icon-more";
			};
		},
        handleUserClick(){
			this.exitbtn = true
			let f = (e) => {
				this.exitbtn = false
				document.removeEventListener('click',f)
			}
			document.addEventListener('click',f)
		},
       //退出登录
		logout: function () {
			var _this = this;
			this.$confirm('确认退出吗?', '提示', {
				//type: 'warning'
			}).then(() => {
				//store.state.User.token = '';
				sessionStorage.removeItem('user');
				sessionStorage.removeItem('userId');
				sessionStorage.removeItem('schoolName');
				sessionStorage.removeItem('token');
				_this.$router.push('/login');
			}).catch(() => {

			});


		},
		//折叠导航栏
		collapse:function(){
			this.collapsed=!this.collapsed;
			var menuWidth = document.getElementById('menuClass');
			if(menuWidth.offsetWidth===0){
				menuWidth.style.width = "230px"
			}

		},
		showMenu(i,status){
			this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
		},
		//获取菜单列表
		getMenuList(){
			this.menuList = sessionStorage.getItem('menuList');
		},
		//获取菜单列表
		checkMenu(item){
			 var index = this.menuList.indexOf(item);
			 return index
		},
		handleUpdatePwd() {
			this.pwdForm.oldPassword = "";
			this.pwdForm.newPassword = "";
			this.pwdForm.newPassword2 = "";
			this.pwdFormVisible = true;
		},
		closeDialog: function () {
			this.$refs['pwdForm'].resetFields();
			this.pwdFormVisible = false;
		},
		//保存密码
		pwdSubmit: function () {
			this.$refs.pwdForm.validate((valid) => {
				if (valid) {
						
						let params = {
							adminId: this.adminId,
							oldPassword: this.pwdForm.oldPassword,
							newPassword: this.pwdForm.newPassword
						};
						//console.log(params);

						SysApi.updatePwd(params,res =>{
							this.listLoading = false;
							this.$message({
								message: '提交成功',
								type: 'success'
							});
							this.$refs['pwdForm'].resetFields();
							this.pwdFormVisible = false;
						}, (errorType, error) => {
							this.$message({type: 'error', message: '提交失败!'})
							// console.log("error=");
							// console.log(error);

						})
						
				}
			});
		},
	}
};
</script>
<style scoped lang="scss">
	@import '~scss_vars';

.container {
		position: absolute;
		top: 0px;
		bottom: 0px;
		width: 100%;
		.header {
			height: 60px;
			line-height: 60px;
			background: $color-primary;
			color:#fff;
			.title {
				text-align: left;
				padding-left: 1px;
				float: left;
				font-size: 18px;
			}
			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;
				.userinfo-inner {
					cursor: pointer;
					color:#fff;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0px 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				//width:230px;
				height:60px;
				font-size: 22px;
				padding-left:20px;
				padding-right:20px;
				border-color: rgba(238,241,146,0.3);
				border-right-width: 1px;
				border-right-style: solid;
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-width{
				width:230px;
			}
			.logo-collapse-width{
				width:60px
			}
			.tools{
				padding: 0px 23px;
				width:14px;
				height: 60px;
				line-height: 60px;
				cursor: pointer;
			}
		}
		.main {
			display: flex;
			// background: #324057;
			position: absolute;
			top: 60px;
			bottom: 0px;
			overflow: hidden;
			aside {
				flex:0 0 230px;
				width: 230px;
				// position: absolute;
				// top: 0px;
				// bottom: 0px;
				.el-menu{
					height: 100%;
				}
				.collapsed{
					width:60px;
					.item{
						position: relative;
					}
					.submenu{
						position:absolute;
						top:0px;
						left:60px;
						z-index:99999;
						height:auto;
						display:none;
					}

				}
			}
			.menu-collapsed{
				flex:0 0 60px;
				width: 60px;
			}
			.menu-expanded{
				flex:0 0 230px;
				width: 230px;
			}
			.content-container {
				// background: #f1f2f7;
				flex:1;
				// position: absolute;
				// right: 0px;
				// top: 0px;
				// bottom: 0px;
				// left: 230px;
				overflow-y: scroll;
				padding: 20px;
				.breadcrumb-container {
					//margin-bottom: 15px;
					.title {
						min-width: 500px;
						float: left;
						color: #475669;
					}
					.breadcrumb-inner {
						float: right;
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
				}
			}
		}
	}
</style>